<template>
  <div class='app-container calendar-list-container'>
    
        <!-- <el-form-item label="培训对象" prop="students"> -->
      
            <cmts :dynamicTags="dynamicTagsStudents"></cmts>
          <!-- <el-input v-model="temp.students"></el-input> -->
        {{dynamicTagsStudents}}
        <org-tree :dcks-value="this.dcksValue" @getDcksLabel="getDcksLabel" @getDcksValue="getDcksValue" :dcks-label="this.dcksLabel" :check-strictly="true" :is-multiple="false" :is-dialog="true"></org-tree>
        {{dcksValue}} {{dcksLabel}}
  </div>
</template>

<script>
// import { fetchList, create, update, del } from "@/api/plan";
import { fetchMemberList } from "@/api/member";
import cmts from '@/components/Customer/csMemberTags'
import waves from "@/directive/waves/index.js"; // 水波纹指令
import orgTree from "@/components/OrgTree/orgTree";

export default {
  name: "x",
  directives: {
    waves
  },
  components: { cmts,orgTree },
  data() {
    return {
      dcksValue: [],
      dcksLabel: [],
      sels: [],
      list: null,
      showAuditor: false,
      total: null,
      listLoading: null,
      listQuery: {
        page: 1,
        limit: 20,
        location: undefined,
        descr: undefined,
        date: undefined,
        date: undefined,
        sort: "+id"
      },
      dateSech: "2017-01-01",
      temp: {
        id: undefined,
        // id: '',
        enable: "",
        date: "",
        time: "",
        place: "",
        form: "",
        cate: "",
        item: "",
        aim: "",
        hour: "",
        content: "",
        org: "",
        post: "",
        teacher: "",
        students: ""

        // location: '',
        // avatar: '',
        // enable: ''
      },
      tag: "",
      dynamicTagsTeacher: [],
      dynamicTagsStudents: [],
      inputVisible: false,
      inputValue: "",
      dialogfVisible: false,
      memberList: null,
      dialogMemberListVisible: false,
      multipleSelection: [],
      memberTotal: null,
      memberListQuery: {
        page: 1,
        limit: 20,
        org: undefined,
        post: undefined
      },
      memberTableKey: 0,
      memberListLoading: null,
      delids: {
        ids: ""
      },
      textMap: {
        update: "编辑",
        create: "创建"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      tableKey: 0,
      rules: {},

      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      data2: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  // created() {
  //   this.getList();
  // },

  // watch: {
  //   memberList(curVal, oldVal) {
  //     console.log("watch", curVal, oldVal);
  //     var rows = [];
  //     if (curVal) {
  //       for (const v of curVal) {
  //         // console.log(v)
  //         for (const y of this.dynamicTagsStudents) {
  //           // console.log(y.substring(0,6)+"-"+y.substring(7))
  //           if (y.substring(0, 6) == v.epnum && y.substring(7) == v.name) {
  //             rows.push(v);
  //           }
  //         }
  //       }
  //       // this.resetSelection();
  //       console.log("1");
  //       console.log(rows);
  //     }
  //   }
  // },
  filters: {
    enableFilter: function(value) {
      if ("0" === value) {
        return "草稿";
      } else if ("1" === value) return "有效";
    },
    cateFilter: function(value) {
      if ("0" === value) {
        return "质量";
      } else if ("1" === value) {
        return "安全";
      } else if ("2" === value) {
        return "技术";
      } else if ("3" === value) {
        return "管理";
      } else if ("4" === value) {
        return "其他";
      }
    }
  },
  methods: {
    getDcksLabel(cksLabel){
        console.log("getDcksLabel.cksLabel",cksLabel)
      },
      getDcksValue(cksValue){console.log("getDcksLabel.cksValue",cksValue)},
    getList() {
      // console.log(location.href)
      // console.log(document.URL)
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        // debugger
        // console.log(response.data);
        if (response.status === 200 && response.data.code === 2000) {
          this.list = response.data.items;
          this.total = response.data.total;
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        this.listLoading = false;
      });
    },
    dateSechChange(val) {
      this.listQuery.date = val;
    },

    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    handleUpdate(row) {
       this.dcksValue=[102];
      this.dckel=["客运营销中心/票务一车间/收益审核工班 "];
      this.temp = Object.assign({}, row);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
    },
    selsChange(sels) {
      this.sels = sels;
    },
    handleDel() {
      this.$confirm("删除?", "提示", { type: "warning" })
        .then(async () => {
          // this.$store.dispatch('openLoading');
          const idg = this.sels.map(item => item.id); //['1','2','3']
          console.log(idg);
          this.delids.ids = this.sels.map(item => item.id).join(); //'1,2,3'
          const res = await del(this.delids);
          // debugger
          if (res.data.code == 2000) {
            for (const y of idg) {
              for (const v of this.list) {
                if (v.id === y) {
                  const index = this.list.indexOf(v);
                  this.list.splice(index, 1);
                  break;
                }
              }
            }
            // this.$store.dispatch('closeLoading');
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          } else {
            //  this.$store.dispatch('closeLoading');
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(() => {
          // this.$store.dispatch('closeLoading');
          this.$notify({
            title: "失败",
            message: "删除失败",
            type: "error",
            duration: 2000
          });
        });
    },
    create() {
      // validate
      // this.$store.dispatch('openLoading');
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const res = await create(this.temp);
          // debugger
          if (res.data.code == 2000) {
            console.log(res.data);
            this.temp = res.data.item;
            this.temp.id = res.data.item.id;
            this.temp.enable = "1";
            this.list.unshift(this.temp);
            // this.$store.dispatch('closeLoading');
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          } else {
            // this.$store.dispatch('closeLoading');
            this.$notify({
              title: "失败",
              message: "创建失败",
              type: "error",
              duration: 2000
            });
          }
        } else {
          // this.$store.dispatch('closeLoading');
          console.log("error submit!!");
          return false;
        }
        this.dialogFormVisible = false;
      });
    },
    update() {
      // this.$store.dispatch('openLoading');
      this.$refs["form"].validate(async valid => {
        if (valid) {
          // console.log(Date.parse(new Date()));
          // setTimeout(function() {
          //   console.log(Date.parse(new Date()));
          // }, 5000);
          const res = await update(this.temp);
          console.log(res);
          if (res.data.code == 2000) {
            for (const v of this.list) {
              if (v.id === this.temp.id) {
                const index = this.list.indexOf(v);
                this.list.splice(index, 1, this.temp);
                break;
              }
            }
            // this.$store.dispatch('closeLoading');
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          } else {
            // this.$store.dispatch('closeLoading');
            this.$notify({
              title: "失败",
              message: "更新失败" + res.data.msg,
              type: "error",
              duration: 2000
            });
          }
        } else {
          // this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
        }
        this.dialogFormVisible = false;
      });
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        descr: ""
      };
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleDownload() {
      // require.ensure([], () => {
      //   const { export_json_to_excel } = require("vendor/Export2Excel");
      //   const tHeader = ["ID", "名称", "描述", "地址", "电话"];
      //   const filterVal = ["id", "descr", "longDescr", "location", "tel"];
      //   const data = this.formatJson(filterVal, this.list);
      //   export_json_to_excel(tHeader, data, "table数据");
      // });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "tel") {
            return "不可下载";
          } else {
            return v[j];
          }
        })
      );
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleMemberFilter() {
      this.memberListQuery.page = 1;
      this.showMemberList();
    },
    handleMemberSizeChange(val) {
      this.memberListQuery.limit = val;
      console.log("handleMemberSizeChange", val);
      this.showMemberList();
    },
    handleMemberCurrentChange(val) {
      this.memberListQuery.page = val;
      this.showMemberList();
    },
    handleClose(tag) {
      this.dynamicTagsStudents.splice(this.dynamicTagsStudents.indexOf(tag), 1);
    },
    // showInput() {
    //   this.inputVisible = true;
    //   this.$nextTick(_ => {
    //     this.$refs.saveTagInput.$refs.input.focus();
    //   });
    // },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTagsStudents.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleSelectionChange(val) {
      if (val.length === 0) {
        this.initSel();
      }
      console.log("handleSelectionChange-val", this.multipleSelection, val);
      // console.log();
      this.multipleSelection = val;
      console.log(7);
      console.log(this.multipleSelection);
    },
    // resetSelection(){
    //   console.log("resetSelection")
    //   console.log(this.multipleSelection);
    //   for(var i =0;i<this.multipleSelection.length-1;i++){
    //     if(this.multipleSelection[i]==this.multipleSelection[i+1]){
    //       this.multipleSelection.slice(i,1);
    //     }
    //   }
    // },
    toggleSelection(rows) {
      console.log(5);
      console.log(rows);
      if (rows) {
        console.log(4);
        console.log(rows);
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
      console.log(6);
      console.log(rows);
    },
    showMemberList() {
      this.dialogMemberListVisible = true;
      console.log("showMemberList", this.memberListQuery);
      fetchMemberList(this.memberListQuery).then(response => {
        // debugger
        // console.log(response.data);
        if (response.status === 200 && response.data.code === 2000) {
          this.memberList = response.data.items;
          this.memberTotal = response.data.total;
          // console.log(this.dynamicTagsStudents)
        } else {
          console.log(response);
          this.$notify({
            title: "失败1",
            message: response.status + response.data.msg,
            type: "error",
            duration: 200000
          });
        }
      });
    },
    initSel() {
      var rows = [];
      for (const v of this.memberList) {
        // console.log(v)
        for (const y of this.dynamicTagsStudents) {
          // console.log(y.substring(0,6)+"-"+y.substring(7))
          if (y.substring(0, 6) == v.epnum && y.substring(7) == v.name) {
            rows.push(v);
          }
        }
      }
      // this.resetSelection();
      console.log("1");
      console.log(rows);
      this.toggleSelection(rows);
      console.log("2");
      console.log(this.multipleSelection);
      console.log("3");
    },
    resetDynamicTags() {
      // console.log(this.multipleSelection);
      // console.log(this.dynamicTagsStudents)
      if (this.multipleSelection.length > 0) {
        for (const v of this.multipleSelection) {
          // console.log(v.epnum +"-"+v.name)
          if (!this.dynamicTagsStudents.includes(v.epnum + "-" + v.name)) {
            this.dynamicTagsStudents.push(v.epnum + "-" + v.name);
          }
        }
      }
      this.dialogMemberListVisible = false;
      // console.log(this.dynamicTagsStudents)
    }
  }
};
</script>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>